<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册 - HouseHold</title>
    <link th:href="@{/assets/css/bootstrap.min.css}" href="../static/assets/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/assets/css/register.css}" href="../static/assets/css/register.css" rel="stylesheet">
    <link th:href="@{/assets/css/express.css}" href="../static/assets/css/express.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h3 class="title">用户注册</h3>
    <div class="main">
        <div class="mt10 pull-right">
            <a href="/login.html"><i class="glyphicon glyphicon-backward"></i>返回登陆</a>
        </div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#registryUsername" aria-controls="username" role="tab" data-toggle="tab">用户名注册</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="registryUsername">
                <form class="form-horizontal" id="registryUsernameForm">
                    <input type="hidden" name="type" value="1">
                    <div class="form-group">
                        <label for="username" class="col-sm-3 control-label">用户名</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password1" class="col-sm-3 control-label">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="password1" name="password1" placeholder="确认密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-success btn-block">注册</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<script th:src="@{/assets/js/http.js}" src="../static/assets/js/http.js"></script>
<script th:src="@{/assets/js/express.js}" src="../static/assets/js/express.js"></script>
<script th:src="@{/assets/js/jquery.min.js}" src="../static/assets/js/jquery.min.js"></script>
<script th:src="@{/assets/js/jquery.validate.min.js}" src="../static/assets/js/jquery.validate.min.js"></script>
<script th:src="@{/assets/layer/layer.js}" src="../static/assets/layer/layer.js"></script>
<script th:src="@{/assets/js/bootstrap.min.js}" src="../static/assets/js/bootstrap.min.js"></script>

<script>
    $().ready(function() {
        $("#registryUsernameForm").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true,
                    equalTo: "#password1"
                },
                password1: {
                    required: true,
                    equalTo: "#password"
                }
            },
            messages: {
                username: {
                    required:"用户名不能为空"
                },
                password: {
                    required: "密码不能为空",
                    equalTo: "两次密码输入不一致"
                },
                password1: {
                    required: "密码不能为空",
                    equalTo: "两次密码输入不一致"
                }
            },
            submitHandler: function (form) {
                sendJson(HTTP.POST, "/auth/register", $("#registryUsernameForm").serialize() , false, function (res) {
                    if (res.code === 0) {
                        layer.msg("注册成功", {icon: 1});
                        setTimeout("new function(){window.location.href='/login.html'}","3000");
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, function () {
                    layer.msg("未知错误", {icon: 2});
                });
            }
        });

        $("#registryTelForm").validate({
            rules: {
                tel: {
                    required: true,
                    number: true
                },
                code: {
                    required: true,
                    number: true
                }
            },
            messages: {
                tel: {
                    required: "手机号码不能为空",
                    number: "非法字符"
                },
                code: {
                    required: "验证码不能为空",
                    number: "非法字符"
                }
            },
            submitHandler: function (form) {
                sendJson(HTTP.POST, "/auth/register", $("#registryTelForm").serialize(), false, function (res) {
                    if (res.code === 0) {
                        layer.msg("注册成功", {icon: 1});
                        setTimeout("new function(){window.location.href='/'}","3000");
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, function () {
                    layer.msg("未知错误", {icon: 2});
                });
            }
        });
    });
</script>
</body>
</html>